import 'package:flutter/material.dart';


void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text("Animation Widget Demo"),
      ),
      body: StaggerAnimationWidget(),
    ),
  ));
}

class StaggerAnimationWidget extends StatefulWidget {
  @override
  _StaggerAnimationWidgetState createState() => _StaggerAnimationWidgetState();
}

class _StaggerAnimationWidgetState extends State<StaggerAnimationWidget>
    with TickerProviderStateMixin {
  
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 2000),
      vsync: this
    );
  }
  
  _playAnimation() async {
    try {
      await _controller.forward().orCancel;
      await _controller.reverse().orCancel;
  } on TickerCanceled {
      
    }
    
    
}

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          ElevatedButton(
            onPressed: () => _playAnimation(),
            child: const Text('start animation'),
          ),
          Container(
            width: 300,
            height: 300,
            decoration: BoxDecoration(
              color: Colors.black.withOpacity(0.1),
              border: Border.all(
                color: Colors.black.withOpacity(0.5),
              ),
            ),
            child: StaterAnimation(controller: _controller),
          ),
        ],
      ),
    );
  }
}

class StaterAnimation extends StatelessWidget{
  late final Animation<double> controller;
  late final Animation<double> height;
  late final Animation<EdgeInsets> padding;
  late final Animation<Color?> color;
  StaterAnimation({
    Key? key,
    required this.controller,
  }) : super(key: key) {
    height = Tween<double>(begin: .0, end: 300.0)
        .animate(CurvedAnimation(
      parent: controller,
      curve: const Interval(
        0.0, 0.6, //间隔，前60%的动画时间
        curve: Curves.ease
      )
    ));

    color = ColorTween(begin: Colors.green, end: Colors.red)
    .animate(CurvedAnimation(
      parent: controller,
      curve: const Interval(
        0.0, 0.6, // 间隔，前60%的动画时间
        curve: Curves.ease,
      )
    ));

    padding = Tween<EdgeInsets>(
      begin: const EdgeInsets.only(left: 0),
      end: const EdgeInsets.only(left: 100.0)
    ).animate(CurvedAnimation(
      parent: controller,
      curve: const Interval(
        0.6, 1.0, //  间隔，后40%的动画
        curve: Curves.ease,
      ),
    ));
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      builder: _buildAnimation,
      animation: controller,
    );
  }

  Widget _buildAnimation(BuildContext context, child) {
    return Container(
      alignment: Alignment.bottomCenter,
      padding: padding.value,
      child: Container(
        color: color.value,
        width: 50.0,
        height: height.value,
      ),
    );
  }
}
